<!-- 权限列表 vue -->
<template>
    <div>

        <el-tabs v-model="activeName2" type="card" >
            <el-tab-pane label="权限管理" name="first">

            </el-tab-pane>
            <el-form :inline="true" ref="form" :model="pageAbout">
                <el-form-item label="名称" prop="name">
                    <el-input placeholder="" v-model="pageAbout.name"></el-input>
                </el-form-item>
                <el-form-item label="标识" prop="percode">
                    <el-input placeholder="" v-model="pageAbout.percode"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="state">
                    <el-select v-model="pageAbout.state" placeholder="请选择" style="width:100px">
                        <el-option label="是" value="2"></el-option>
                        <el-option label="否" value="1"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="resetForm('form')">重置</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="found">查找</el-button>
                </el-form-item>
            </el-form>
            <!-- 数据列表 -->
            <div style="margin-top:10px;">
                <div class="dateMsg" v-if="pageCount" style="color: red;margin-left:10px">总计<b>{{pageCount}}</b>条数据</div>
                <el-table :data="tableData" style="width: 100%" v-loading="listLoading">
                    <!--<el-table-column prop="name" label="编号"></el-table-column>-->
                    <el-table-column prop="name" label="名称"></el-table-column>
                    <el-table-column prop="type" label="类型"></el-table-column>
                    <el-table-column prop="percode" label="标识"></el-table-column>
                    <el-table-column prop="parentids" label="父节点"></el-table-column>
                    <el-table-column prop="state" label="状态" :formatter="banFormat"></el-table-column>
                    <el-table-column label="操作">
                        <template scope="scope">
                            <el-button size="small" type="text"@click="editRow(scope.row.id,'editActionDialog')">编辑</el-button>
                            <el-button v-if="scope.row.state==1" type="text" size="small" @click="forBidden(scope.row.id,2)">启用</el-button>
                            <el-button v-else type="text" size="small" @click="forBidden(scope.row.id,1)">禁用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog title="编辑权限" :visible.sync="dialog.editActionDialog.open" :modal="false" size="small" v-if="dialog.editActionDialog.open" :label-position="position">
                <el-form ref="form" :model="form" label-width="80px" :label-position="position" >
                    <el-form-item label="名称" >
                        <el-input v-model="name" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" >
                        <el-select v-model="state" style="width:100px" >
                            <el-option label="禁用" value="1"></el-option>
                            <el-option label="启用" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <div style="width:200px;margin: 0 auto"><el-button type="primary" @click="submitForm('form','addNew')">确定</el-button></div>
                </el-form>
            </el-dialog>
            <div  style="width:200px;margin-left:80%;margin-top: 10px">
                <el-pagination @current-change="getCurrentpage"
                               :page-size="10"
                               layout="prev, pager, next"
                               :total="pageCount">
                </el-pagination>
            </div>
            <!-- 权限删除 -->
            <el-dialog title="删除提示" :visible.sync="dialog.delActionDialog.open" size="tiny">
                <span>确定要删除此数据吗?</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog('delActionDialog')">取 消</el-button>
		    <el-button type="primary" @click="dialogBtnOk('delActionDialog')">确 定</el-button>
		  </span>
            </el-dialog>
            <!-- 添加权限 -->
            <el-dialog title="权限添加" :visible.sync="dialog.addActionDialog.open" v-if="dialog.addActionDialog.open">
                <addActionDialog @closeDialog="closeDialog('addActionDialog')" @freshList="getActionList"></addActionDialog>
            </el-dialog>
        </el-tabs>
    </div>
</template>
<script>
    import _http from '../common/http.vue'
    import addActionDialog from './addActionDialog.vue'
    export default{
        components:{addActionDialog},
        data(){
            return {
                activeName2: 'first',
                options:[],
                //不大
                selectedActionList:[],
                menuFormInfo:{},
                dataList:{
                    actionTableList:[],
                    actionTableDataCount:0,
                    selectActionList:[]
                },
                apiPort:{
//				分页数据接口
                    dataList:'system/menu/list',
                    forBiddenApi:'system/menu/enableOrDisable',
                    getEdit:'system/menu/toedit',
                    upEdit:'system/menu/edit'
                },
                listLoading:false,
                currentPage:1,
                pageAbout:{
                    pageNumber:1,
                    pageSize:10,
                    name:'',
                    state:'',
                    percode:'',
                    userid:''
                },
                tableData:'',
                pageCount:'',
                userid:'',
                state:'',
                name:'',
                uId:'',
                dialog:{
                    delActionDialog:{
                        open:false
                    },
                    addActionDialog:{
                        open:false
                    },
                    editActionDialog:{
                        open:false
                    }
                },
                position:'left',
                form:{
                    delActionFormInfo:{
                        actionId:0
                    },
                    editActionFormInfo:{
                        actionId:0,
                        name:'',
                        flag:'',
                        mark:''
                    }
                },
                formLabelWidth:'120px',
            }
        },
        mounted(){
//		获取权限列表
            this.userid=localStorage.getItem('userId')
            this.pageAbout.userid = localStorage.getItem('userId')
            this.getCurrentpage(1)

//            this.getActionList()
//            this.getSelectActionList()
        },
        methods:{
            getCurrentpage(val){
                this.listLoading=true
                var that = this
                this.currentPage = val ? val:1
                this.pageAbout.pageNumber=this.currentPage
                var params = that.querystring.stringify(this.pageAbout)
                _http.axiosRequest(that,that.apiPort.dataList,params,(res)=>{
                    that.pageCount=res.data.data.total
                console.log(res)
                this.listLoading=false
                that.tableData = res.data.data.records
            })
            },

            resetForm(formName){
                this.$refs[formName].resetFields();

            },
            found(){
                this.getCurrentpage(1)
            },
            banFormat:function(row,column){
                var ban = row[column.property];
                if ( ban == 1 ){
                    return "禁用";
                }
                return "启用";
            },
//		启用禁用
            forBidden(id,num){
                var that = this
                var params = that.querystring.stringify({authid:id,status:num,userid:that.userid})
                _http.axiosRequest(that,that.apiPort.forBiddenApi,params,(res)=>{
                that.getCurrentpage(that.currentPage)
            })
            },
            getActionList(){
                this.goToPage(this.currentPage)
            },
            closeDialog(dialog){
                this.dialog[dialog].open = false
            },
            openDialog(dialog){
                this.dialog[dialog].open = true
            },
//		编辑
            editRow(id,dialog){
                this.openDialog(dialog)
                var that = this
                that.uId = id
                var params = that.querystring.stringify({authid:id,userid:that.userid})
                _http.axiosRequest(that,that.apiPort.getEdit,params,(res)=>{
                    console.log('编辑')
                   console.log(res.data.data)
                that.name = res.data.data.name
                that.state = res.data.data.state+''
            })

            },
//            提交编辑
            submitForm(){
                var that = this
                var a = parseInt(that.state)
                console.log(a)
                console.log(that.name)
//                console.log()
//                console.log(a)
                var params = that.querystring.stringify({id:that.uId,userid:that.userid,name:that.name,state:a})
                _http.axiosRequest(that,that.apiPort.upEdit,params,(res)=>{
                    console.log('编辑提交')
                console.log(res)
                if(res.data.code == 100){
                that.$message({
                    message:'编辑成功',
                    type:'success'
                })
                }else{
                    that.$message({
                        message:'操作失败',
                        type:'waring'
                    })
                }
            })
                setTimeout(function(){
                    that.getCurrentpage(that.currentPage)
                   that.closeDialog('editActionDialog')
                },500)
                that.getCurrentpage(that.currentPage)
            },
//		删除权限
            delAction(dialog){
                _http.axiosRequest(this,'delActionInfo',{id:this.form.delActionFormInfo.actionId},(res)=>{
                    if (_http.apiResult(this,res.data)) {
                    this.getActionList()
                    this.closeDialog(dialog)
                }
            })
            },
//		编辑权限
            editAction(dialog){
                _http.axiosRequest(this,'updateActionInfo',{form:this.form.editActionFormInfo},(res)=>{
                    if (_http.apiResult(this,res.data)) {
                    this.getActionList()
                    this.closeDialog(dialog)
                }
            })
            },
//		获取当前页码内容
            goToPage(val){
                this.currentPage = val
                _http.axiosRequest(this,'actionList',{pageNo:val,pageSize:10,type:'form'},(res)=>{
                    this.dataList.actionTableList = res.data.dataList
                this.dataList.actionTableDataCount = res.data.dataCount
            })
            },
        }
    }
</script>